<link rel="stylesheet" href="__STATIC__/common_new.css?v=1">
<link rel="stylesheet" href="__STATIC__/package.css">
<style>
    .layui-layer-content .form-wrap {padding: 0}
    .layui-layer-page .layui-layer-content {overflow-y: auto!important;}
    .layui-layout-admin .layui-body .body-content {background: none;padding: 0}
    .info-wrap {display: flex}
    .info-wrap .layui-card {flex: 1;margin-top: 0}
    .info-wrap .layui-card:first-child {margin-right: 15px}
    .member-info {display: flex}
    .member-info .headimg {margin-right: 15px;width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;overflow: hidden}
    .member-info .headimg img {max-width: 100%;height: auto}
    .member-info .info {flex: 1;width: 0;display: flex;flex-wrap: wrap}
    .member-info .info .data-item {width: 50%;padding-right: 10px;box-sizing: border-box;line-height: 30px}
    .member-info .data-item .layui-icon {cursor: pointer}
    .layui-tab-content {padding: 0}
    .screen {margin: 15px 0}
    .select-level-layer .layui-layer-content {overflow: unset!important;}
    .card-common{padding-top: 20px;}

    .screen .form-row {
        margin-left: 120px;
    }

</style>

<style>
    .body-content {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .summary-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .summary-wrap .summary-item {
        padding: 0 15px;
        box-sizing: border-box;
        flex: 1;
    }

    .summary-wrap .summary-item .title, .summary-wrap .summary-item .bottom-title {
        color: #909399;
        font-size: 14px;
        margin-top: 5px;
    }

    .summary-wrap .summary-item .value {
        color: #303133;
        font-size: 26px;
        margin-top: 10px;
    }
    .summary-wrap .last {
        width: 240px;
        flex: none;
        padding-left: 80px !important;
        border-left: 1px solid #eee;
    }

    .trend-wrap, .constitute-wrap, .distribution {
        display: flex;
    }
    .trend-wrap .common-wrap, .constitute-wrap .common-wrap, .distribution .wrap {
        flex: 1;
    }
    .trend-wrap .common-wrap:first-child, .constitute-wrap .common-wrap:first-child{
        margin-right: 0;
    }
    .distribution .wrap:first-child {
        margin-right: 15px;
        display: flex;
        justify-content: center;
    }
</style>

<title>会员详情</title>


<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href=""></a>
        <a><cite>会员详情</cite></a>
    </div>
</div>

<div class="layui-fluid">



    <div class="info-wrap  body-content" style="visibility: visible;">
        <div class="layui-card card-common card-brief head">






        </div>
    </div>
</div>
<script>

    //地图
    layui.use(['carousel', 'echarts'], function(){
        var $ = layui.$
            ,carousel = layui.carousel
            ,echarts = layui.echarts;

        var echartsApp = [], options = [
            {
                title : {
                    text: '访客地区分布',
                    subtext: '不完全统计'
                },
                tooltip : {
                    trigger: 'item'
                },
                dataRange: {
                    orient: 'horizontal',
                    min: 0,
                    max: 60000,
                    text:['高','低'],
                    splitNumber:0
                },
                series : [
                    {
                        name: '访客地区分布',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'multiple',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'西藏', value:60},
                            {name:'青海', value:167},
                            {name:'宁夏', value:210},
                            {name:'海南', value:252},
                            {name:'甘肃', value:502},
                            {name:'贵州', value:570},
                            {name:'新疆', value:661},
                            {name:'云南', value:8890},
                            {name:'重庆', value:10010},
                            {name:'吉林', value:5056},
                            {name:'山西', value:2123},
                            {name:'天津', value:9130},
                            {name:'江西', value:10170},
                            {name:'广西', value:6172},
                            {name:'陕西', value:9251},
                            {name:'黑龙江', value:5125},
                            {name:'内蒙古', value:1435},
                            {name:'安徽', value:9530},
                            {name:'北京', value:51919},
                            {name:'福建', value:3756},
                            {name:'上海', value:59190},
                            {name:'湖北', value:37109},
                            {name:'湖南', value:8966},
                            {name:'四川', value:31020},
                            {name:'辽宁', value:7222},
                            {name:'河北', value:3451},
                            {name:'河南', value:9693},
                            {name:'浙江', value:62310},
                            {name:'山东', value:39231},
                            {name:'江苏', value:35911},
                            {name:'广东', value:55891}
                        ]
                    }
                ]
            }
        ]
            ,elemDataView = $('#LAY-index-pagethree-home').children('div')
            ,renderDataView = function(index){
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            window.onresize = echartsApp[index].resize;
            console.log(index)
        };
        //没找到DOM，终止执行
        if(!elemDataView[0]) return;

        renderDataView(0);
        console.log(options)
    });

    // $(document).ready(function () {
        // getMemberStatData();
        // getMemberLevelRatio();
        // getMemberStat();
        // getMemberChannelRatio();
        // layui.use('form', function () {
        //     var table, form = layui.form;
        //     form.render();
        //
        //     table = new Table({
        //         elem: '#member_list',
        //         url: ns.url("shop/member/areaCount"),
        //         where: {
        //             handle: true
        //         },
        //         parseData: function (res) { //res 即为原始返回的数据
        //             var list = [];
        //             var result = res.data.list;
        //             if (result.length > 0) {
        //                 china_option.series[0].data = result;
        //
        //                 for (var i in result){
        //                     if(result[i].value > 0){
        //                         list.push(result[i])
        //                     }
        //                 }
        //             }
        //             china_echart.setOption(china_option);
        //
        //             return {
        //                 "code": res.code, //解析接口状态
        //                 "msg": res.message, //解析提示文本
        //                 "count": res.data.list.length, //解析数据长度
        //                 "data": list //解析数据列表
        //             };
        //         },
        //         page: false,
        //         cols: [
        //             [
        //                 {
        //                     field: 'LAY_INDEX',
        //                     title: '排名',
        //                     unresize: 'false',
        //                     width: '20%',
        //                     templet: function (data) {
        //                         return data.LAY_INDEX;
        //                     }
        //                 }, {
        //                 field: 'name',
        //                 title: '地区',
        //                 unresize: 'false',
        //                 width: '30%'
        //             }, {
        //                 field: 'value',
        //                 title: '会员数',
        //                 unresize: 'false',
        //                 width: '25%'
        //             }, {
        //                 field: 'ratio',
        //                 title: '会员占比',
        //                 unresize: 'false',
        //                 width: '25%',
        //                 templet: function (data) {
        //                     return data.ratio + '%';
        //                 }
        //             }
        //             ]
        //         ]
        //     });
        // });

        // 基于准备好的dom，初始化echarts实例
        // if($('#main').length) {
        //     var myChart = echarts.init(document.getElementById('main'));
        //     // 指定图表的配置项和数据
        //     var option = {
        //         tooltip: {
        //             trigger: 'item',
        //             formatter: '{a} <br/>{b}: {c} ({d}%)'
        //         },
        //         legend: {
        //             orient: 'vertical',
        //             right: 0,
        //             top: 0,
        //             data: ['下单会员数', '未下单会员数']
        //         },
        //         color: ['#2FCE63', '#F5CC4E'],
        //         series: [{
        //             width: 100,
        //             height: 100,
        //             top: -5,
        //             left: 0,
        //             name: '',
        //             type: 'pie',
        //             radius: ['50%', '70%'],
        //             avoidLabelOverlap: false,
        //             label: {
        //                 show: false,
        //                 position: 'center'
        //             },
        //             emphasis: {
        //                 label: {
        //                     show: true,
        //                     fontSize: '12',
        //                     color: baseColor
        //                 }
        //             },
        //             labelLine: {
        //                 show: false
        //             },
        //             data: [
        //                 {
        //                     value: 0,
        //                     name: '下单会员数',
        //                     tooltip: {
        //                         trigger: 'item',
        //                         backgroundColor: 'rgba(255, 255, 255, 0.7)',
        //                         borderColor: '#999',
        //                         borderWidth: 1,
        //                         padding: 10,
        //                         textStyle: {
        //                             fontSize: 12,
        //                             color: '#333'
        //                         }
        //                     }
        //                 },
        //                 {
        //                     value: 0,
        //                     name: '未下单会员数',
        //                     tooltip: {
        //                         trigger: 'item',
        //                         backgroundColor: 'rgba(255, 255, 255, 0.7)',
        //                         borderColor: '#999',
        //                         borderWidth: 1,
        //                         padding: 10,
        //                         textStyle: {
        //                             color: '#333',
        //                             fontSize: 12
        //                         }
        //                     }
        //                 }
        //             ]
        //         }]
        //     };
        //
        //     // 使用刚指定的配置项和数据显示图表。
        //     myChart.setOption(option);
        // }

        // if($("#china_echart").length) {
        //     var china_echart = echarts.init(document.getElementById('china_echart'));
        //     var china_option = {
        //         tooltip: {
        //             formatter: function (params, ticket, callback) {
        //                 return params.seriesName + '<br />' + params.name + '：' + params.value
        //             }
        //         },
        //         visualMap: {
        //             min: 0,
        //             max: 1500,
        //             left: 'left',
        //             top: 'bottom',
        //             text: ['高', '低'],
        //             inRange: {
        //                 color: ['#FFF', '#ff8143']
        //             },
        //             show: false
        //         },
        //         geo: {
        //             map: 'china',
        //             roam: false,
        //             zoom: 1.23,
        //             label: {
        //                 normal: {
        //                     show: true,
        //                     fontSize: '10',
        //                     color: 'rgba(0,0,0,0.7)'
        //                 }
        //             },
        //             itemStyle: {
        //                 normal: {
        //                     borderColor: 'rgba(0, 0, 0, 0.2)'
        //                 },
        //                 emphasis: {
        //                     areaColor: '#e0ffff',
        //                     shadowOffsetX: 0,
        //                     shadowOffsetY: 0,
        //                     shadowBlur: 20,
        //                     borderWidth: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                 }
        //             }
        //         },
        //         series: [{
        //             name: '会员数',
        //             type: 'map',
        //             geoIndex: 0,
        //             data: [{"name": "北京", "value": 0}, {"name": "天津", "value": 0}, {"name": "河北", "value": 0}, {
        //                 "name": "山西",
        //                 "value": 0
        //             }, {"name": "内蒙古", "value": 0}, {"name": "辽宁", "value": 0}, {"name": "吉林", "value": 0}, {
        //                 "name": "黑龙江",
        //                 "value": 0
        //             }, {"name": "上海", "value": 0}, {"name": "江苏", "value": 0}, {"name": "浙江", "value": 0}, {
        //                 "name": "安徽",
        //                 "value": 0
        //             }, {"name": "福建", "value": 0}, {"name": "江西", "value": 0}, {"name": "山东", "value": 0}, {
        //                 "name": "河南",
        //                 "value": 0
        //             }, {"name": "湖北", "value": 0}, {"name": "湖南", "value": 0}, {"name": "广东", "value": 0}, {
        //                 "name": "广西",
        //                 "value": 0
        //             }, {"name": "海南", "value": 0}, {"name": "重庆", "value": 0}, {"name": "四川", "value": 0}, {
        //                 "name": "贵州",
        //                 "value": 0
        //             }, {"name": "云南", "value": 0}, {"name": "西藏", "value": 0}, {"name": "陕西", "value": 0}, {
        //                 "name": "甘肃",
        //                 "value": 0
        //             }, {"name": "青海", "value": 0}, {"name": "宁夏", "value": 0}, {"name": "新疆", "value": 0}, {
        //                 "name": "香港",
        //                 "value": 0
        //             }, {"name": "澳门", "value": 0}, {"name": "台湾", "value": 0}]
        //         }]
        //     };
        //     china_echart.setOption(china_option);
        // }
        function getMemberStat(){
            $.ajax({
                type:'post',
                dataType:'json',
                url:ns.url('shop/member/stat'),
                success:function(res){
                    $("#not_buyed_count").html(res.not_buyed_count)
                    $("#buyed_count").html(res.buyed_count)
                    $("#today_member_count").html(res.today.member_count)
                    $("#yesterday_member_count").html(res.yesterday.member_count)
                    $("#today_order_member_count").html(res.today.order_member_count)
                    $("#yesterday_order_member_count").html(res.yesterday.order_member_count)
                    $("#today_member_recharge_member_count").html(res.today.member_recharge_member_count)
                    $("#yesterday_member_recharge_member_count").html(res.yesterday.member_recharge_member_count)
                    $("#today_coupon_member_count").html(res.today.coupon_member_count)
                    $("#yesterday_coupon_member_count").html(res.yesterday.coupon_member_count)

                    option.series[0].data[0].value = res.buyed_count;
                    option.series[0].data[1].value = res.not_buyed_count;
                    myChart.setOption(option);
                }
            })
        }
    // });

    // var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');

    // function areaCount() {
    //     $.ajax({
    //         url: ns.url("shop/member/areaCount"),
    //         dataType: 'JSON',
    //         type: 'POST',
    //         success: function (res) {
    //             if (res.data.list.length > 0) {
    //                 china_option.series[0].data = res.data.list;
    //             }
    //             china_echart.setOption(china_option);
    //         }
    //     })
    // }

    // areaCount();

    /**
     * 获取会员七日趋势数据
     */
    function getMemberStatData() {
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("shop/stat/getStatData"),
            success: function(res) {
                // 基于准备好的dom，初始化echarts实例
                if($('#newAdd').length == 0 && $('#consume').length == 0) return;
                var newAddChart = echarts.init(document.getElementById('newAdd'));
                var consumeChart = echarts.init(document.getElementById('consume'));
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                        top: '8%',
                        bottom: '9%',
                        left: '8%',
                        right: '4%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        showContent: true,
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        padding: [5, 10],
                        textStyle: {
                            color: '#fff',
                            lineHeight: 30,
                        },
                        formatter: function(params, ticket, callback) {
                            return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value + "人";
                        },
                    },
                    series: [{
                        name: [''],
                        data: [],
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: baseColor
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: baseColor
                            }, {
                                offset: 1,
                                color: '#fff'
                            }])
                        }
                    }]
                };
                option.xAxis.data = res.time;
                option.series[0].name = '新增会员数';
                option.series[0].data = res.member_count;
                newAddChart.setOption(option);
                option.series[0].name = '消费会员数';
                option.series[0].data = res.order_member_count;
                consumeChart.setOption(option);
            }
        });
    }

    // function getMemberLevelRatio() {
    //     $.ajax({
    //         dataType: 'JSON',
    //         type: 'POST',
    //         url: ns.url("shop/member/memberLevel"),
    //         data: {
    //             page_size: 0,
    //         },
    //         success: function(res) {
    //             var level = res.data;
    //             if($('#level').length == 0) return;
    //             var echart = echarts.init(document.getElementById('level'));
    //
    //             // 指定图表的配置项和数据
    //             var option = {
    //                 tooltip: {
    //                     trigger: 'item',
    //                     formatter: '{a} <br/>{b}: {c} ({d}%)'
    //                 },
    //                 legend: {
    //                     orient: 'vertical',
    //                     left: '55%',
    //                     top: '10%',
    //                     align: 'auto',
    //                     data: level.map(function (item) {
    //                         return {
    //                             name: item.level_name,
    //                             icon: 'circle',
    //                         }
    //                     })
    //                 },
    //                 color: level.map(function (item) {
    //                     return getRandomColor();
    //                 }),
    //                 series: [{
    //                     width: 180,
    //                     height: 180,
    //                     top: 10,
    //                     left: '10%',
    //                     name: '',
    //                     type: 'pie',
    //                     radius: ['50%', '70%'],
    //                     avoidLabelOverlap: false,
    //                     label: {
    //                         show: false,
    //                         position: 'center'
    //                     },
    //                     emphasis: {
    //                         label: {
    //                             show: true,
    //                             fontSize: '12',
    //                             color: baseColor
    //                         }
    //                     },
    //                     labelLine: {
    //                         show: false
    //                     },
    //                     data: level.map(function (item) {
    //                         return {
    //                             value: item.member_num,
    //                             name: item.level_name,
    //                             tooltip: {
    //                                 trigger: 'item',
    //                                 backgroundColor: 'rgba(255, 255, 255, 0.7)',
    //                                 borderColor: '#999',
    //                                 borderWidth: 1,
    //                                 padding: 10,
    //                                 textStyle: {
    //                                     fontSize: 12,
    //                                     color: '#333'
    //                                 }
    //                             }
    //                         }
    //                     })
    //                 }]
    //             };
    //             // 使用刚指定的配置项和数据显示图表。
    //             echart.setOption(option);
    //         }
    //     })
    // }

    // function getMemberChannelRatio() {
    //     $.ajax({
    //         dataType: 'JSON',
    //         type: 'POST',
    //         url: ns.url("shop/member/getRegisterChannelMemberNum"),
    //         success: function(res) {
    //             var level = res.data;
    //             if ($("#channel").length == 0) return;
    //             var echart = echarts.init(document.getElementById('channel'));
    //
    //             // 指定图表的配置项和数据
    //             var option = {
    //                 tooltip: {
    //                     trigger: 'item',
    //                     formatter: '{a} <br/>{b}: {c} ({d}%)'
    //                 },
    //                 legend: {
    //                     orient: 'vertical',
    //                     left: '55%',
    //                     top: '20%',
    //                     data: level.map(function (item) {
    //                         return {
    //                             name: item.name,
    //                             icon: 'circle',
    //                         }
    //                     })
    //                 },
    //                 color: level.map(function (item) {
    //                     return getRandomColor();
    //                 }),
    //                 series: [{
    //                     width: 180,
    //                     height: 180,
    //                     top: 10,
    //                     left: '10%',
    //                     name: '',
    //                     type: 'pie',
    //                     radius: ['50%', '70%'],
    //                     avoidLabelOverlap: false,
    //                     label: {
    //                         show: false,
    //                         position: 'center'
    //                     },
    //                     emphasis: {
    //                         label: {
    //                             show: true,
    //                             fontSize: '12',
    //                             color: baseColor
    //                         }
    //                     },
    //                     labelLine: {
    //                         show: false
    //                     },
    //                     data: level.map(function (item) {
    //                         return {
    //                             value: item.member_num,
    //                             name: item.name,
    //                             tooltip: {
    //                                 trigger: 'item',
    //                                 backgroundColor: 'rgba(255, 255, 255, 0.7)',
    //                                 borderColor: '#999',
    //                                 borderWidth: 1,
    //                                 padding: 10,
    //                                 textStyle: {
    //                                     fontSize: 12,
    //                                     color: '#333'
    //                                 }
    //                             }
    //                         }
    //                     })
    //                 }]
    //             };
    //             // 使用刚指定的配置项和数据显示图表。
    //             echart.setOption(option);
    //         }
    //     })
    // // }
    // /**
    //  * 随机生成颜色
    //  * @returns {string}
    //  */
    // function getRandomColor(){
    //     return  '#' + (function(color){
    //         return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
    //         && (color.length == 6) ?  color : arguments.callee(color);
    //     })('');
    // }
</script>
<!--<script src="http://niu.co/app/shop/view/public/js/echarts.min.js"></script>-->
<!--<script src="http://niu.co/app/shop/view/public/js/china.js"></script>-->